import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import _isEmpty from 'lodash/isEmpty'
import { View, Image } from '@tarojs/components'
import GTag from '../GTag'
import './index.scss'

class RowTip extends Component {

	static propTypes = {
		value: PropTypes.string,
		data: PropTypes.array,
		type: PropTypes.string, 	// default small
		cls: PropTypes.string,					
		onClick: PropTypes.func,
	}

	static defaultProps = {
		value: '',
		data: [],
		type: 'default',
		cls: '',
	}

	state = {
		selItem: {}
	}

	render(){
		const { data, cls, value, type } = this.props
		const { selItem } = this.state
		return(
			<View className={`g-tag-list`}>
				{!_isEmpty(data) && data.map((dp, i) => {
					const active = value && (dp.code === value.code || dp.code === value)
					return (<GTag key={dp.code} cls={cls || ''} type={type} text={dp.name} active={active} disabled={dp.checked} onClick={() => this.handleClickTag(dp, i)}/>)
				})}
			</View>
		)
	}

	handleClickTag = (dp, i) => {
		this.setState({ selItem: dp })

		const { onClick } = this.props
		onClick && onClick(dp, i)
	}
}

export default RowTip